import type { PaginationProps } from "antd";
import { Card } from "antd";
import { Button, Table, Pagination } from "antd";
import { useState } from "react";
import type { TableRowSelection } from "antd/es/table/interface";
import BaseModal from "../BaseModal";
import type { InfoModalProps } from "@/components/BaseModal/infoModal";
import InfoModal from "@/components/BaseModal/infoModal";
import "./index.less";
import { themeButtonStyle } from "../../../config/globalStyle";
const showTotal: PaginationProps["showTotal"] = (total) => `共 ${total} 条`;
export interface BaseTableProps<T> {
  columns: any[];
  dataSource: T[];
  uploadName?: string; // 部分表单组件是需要这个发布按钮的
  rowSelection?: TableRowSelection<T>;
  releaseProps?: ReleaseProps;
  editInfoProps?: EditInfoProps;
  RoleControl?: () => JSX.Element;
  deleteInfoProps?: InfoModalProps;
  agreeInfoProps?: InfoModalProps;
  rejectInfoProps?: InfoModalProps;
}

export interface ReleaseProps {
  handleOpen?: () => void;
  handleClose?: () => void;
  isModalOpen?: boolean;
  ModalChildren?: (arg: any) => JSX.Element;
  title?: string;
}

export interface EditInfoProps {
  handleOpen?: (params: any) => void;
  handleClose?: () => void;
  isModalOpen?: boolean;
  ModalChildren?: (arg: any) => JSX.Element;
  title?: string;
}

/** 奇偶行换色 */
function getRowClassName(record: any, index: number) {
  return index % 2 === 0 ? "even-row" : "odd-row";
}
/**
 * todo: 做成一个通用的table
 * @param props
 * @returns
 */
const BaseTable = (props: BaseTableProps<any>) => {
  const {
    columns,
    dataSource,
    uploadName,
    rowSelection,
    RoleControl,
    releaseProps,
    editInfoProps,
    deleteInfoProps,
    agreeInfoProps,
    rejectInfoProps
  } = props;

  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [loading, setLoading] = useState(false);
  // console.log(props);
  const handleOnchange = (current: number, size: number) => {
    console.log(current, size);
    setLoading(true);
    setPage(current);
    setPageSize(size);
    setTimeout(() => {
      setLoading(false);
    }, 500);
  };
  return (
    <div>
      <Card>
        {uploadName && (
          <Button
            onClick={releaseProps?.handleOpen}
            style={{ ...themeButtonStyle, marginBottom: "10px" }}
          >
            + {uploadName}
          </Button>
        )}
        {/* 删除信息弹窗 */}
        {deleteInfoProps && <InfoModal {...deleteInfoProps} />}
        {agreeInfoProps && <InfoModal {...agreeInfoProps} />}
        {rejectInfoProps && <InfoModal {...rejectInfoProps} />}
        {editInfoProps && <BaseModal {...editInfoProps} />}
        {/* 发布弹窗 */}
        {uploadName && <BaseModal {...releaseProps} />}
        {RoleControl && <RoleControl />}
        <Table
          loading={loading}
          rowClassName={getRowClassName}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource.slice(
            (page - 1) * pageSize,
            (page - 1) * pageSize + pageSize
          )}
          size="middle"
          pagination={false}
        />
        <Pagination
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "20px"
          }}
          size="small"
          defaultPageSize={pageSize}
          total={dataSource.length}
          showSizeChanger
          showQuickJumper
          onShowSizeChange={handleOnchange}
          onChange={handleOnchange}
          showTotal={showTotal}
        />
      </Card>
    </div>
  );
};
export default BaseTable;
